<template>
    <div class="app-container">
        <el-card>
            <el-form size="small" ref="searchForm" :model="searchForm" inline>
                <el-form-item label="活动名称">
                    <el-input v-model="searchForm.name" placeholder="请输入活动名称" />
                </el-form-item>
                <el-form-item label="查询时间：" prop="beginTime">
                    <el-date-picker style="width: 200px" v-model="searchForm.beginTime" align="right" type="date"
                        placeholder="选择开始日期" :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd"
                        format="yyyy 年 MM 月 dd 日">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>-</el-form-item>
                <el-form-item prop="endTime">
                    <el-date-picker style="width: 200px" v-model="searchForm.endTime" align="right" type="date"
                        placeholder="选择结束日期" :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd"
                        format="yyyy 年 MM 月 dd 日">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="活动状态">
                    <el-select clearable v-model="searchForm.enableStatus" placeholder="请选择活动状态">
                        <el-option label="正常" value="1"></el-option>
                        <el-option label="关闭" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-refresh" @click="reset()">重置</el-button>
                    <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                </el-form-item>
            </el-form>
            <div>
                <el-button size="small" type="primary" icon="el-icon-plus" @click="addActity('create')">新增活动</el-button>
                <el-button size="small" icon="el-icon-delete" @click="bathDelete()">批量删除</el-button>
            </div>
            <el-table v-loading="listLoading" :data="tableData.data" border style="margin-top: 20px" size="small"
                @selection-change="selectTableList">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column align="center" label="活动ID" prop="id" width="100"></el-table-column>
                <el-table-column align="center" label="活动类型" prop="img">
                    <template slot-scope="scope">
                        <span>{{ scope.row.type | typeFilter }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="活动名称" prop="name"></el-table-column>
                <!-- <el-table-column align="center" label="活动状态">

                </el-table-column> -->
                <el-table-column align="center" label="创建人" prop="createBy">
                </el-table-column>
                <el-table-column align="center" label="活动时间" prop="time">
                    <template slot-scope="scope">
                        <span>{{ scope.row.startTime }}</span>
                        <span>-</span>
                        <span>{{ scope.row.endTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="活动状态" prop="enableStatus">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.enableStatus === 1" type="success">开启</el-tag>
                        <el-tag v-else type="info">关闭</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="addActity('update', scope.row)">编辑</el-button>
                        <el-button size="mini" type="text" @click="deleteActivity(scope.row.id)">删除</el-button>
                        <el-button size="mini" type="text" v-if="scope.row.enableStatus == 1"
                            @click="changeStatus(scope.row)">取消发布</el-button>
                        <el-button @click="blackUser(scope.row)" size="mini" type="text">黑名单</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pageRight" background layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[10, 20, 50, 100]" :page-size="searchForm.pageSize" :total="tableData.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
        </el-card>
        <createForm @getList="getList" ref="createFormRef"></createForm>
        <blackUser @getList="getList" ref="blackUserRef"></blackUser>
    </div>
</template>

<script>
import createForm from './createForm.vue';
import blackUser from './blackUser.vue';
import {
    activityList,
    deleteActivity,
    closeActivity
} from '@/api/activity';
export default {
    components: {
        createForm,
        blackUser
    },
    filters: {
        typeFilter(status) {
            const statusMap = {
                'register': "注册有礼",
                'brokerage': "邀请有礼",
                'query': "查询有礼"
            };
            return statusMap[status];
        }
    },
    data() {
        return {
            searchForm: {
                pageNum: 1,
                pageSize: 10,
                name: '',
                beginTime: '',
                endTime: '',
                enableStatus: null
            },
            tableData: {
                data: [],
                total: 0,
            },
            listLoading: false,
            selectList: []
        };
    },
    created() {
        this.getList();
    },
    methods: {
        blackUser(v) {
            this.$refs.blackUserRef.open(v)
        },
        changeStatus(v) {
            closeActivity(v.id).then(res => {
                this.$message.success('修改成功');
                this.getList();
            })
        },
        handleSizeChange(val) {
            this.searchForm.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.searchForm.pageNum = val;
            this.getList();
        },
        deleteActivity(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteActivity(id).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList();
                })
            })
        },
        selectTableList(val) {
            this.selectList = val
        },
        addActity(type, val) {
            this.$refs.createFormRef.open(type, val);
        },
        reset() {
            this.searchForm = {
                pageNum: 1,
                pageSize: 10,
                name: ''
            };
            this.getList();
        },
        getList() {
            this.listLoading = true;
            activityList(this.searchForm).then(res => {
                this.tableData.data = res.data.list;
                this.tableData.total = res.data.total;
            }).finally(() => {
                this.listLoading = false;
            });
        },
        search() {
            this.searchForm.pageNum = 1;
            this.getList();
        }
    },

};
</script>

<style></style>